<template>
  <div ref="wrap" :class="['common-wrapper', props.borderShow ? '' : 'border']">
    <div class="flex flex-row align-items-baseline wrapper-title">
      <div
        v-if="showTitle"
        class="title-left flex flex-row justify-content-start align-items-center"
      >
        <!-- <div class="title-icon"></div> -->
        <div v-if="props.wrapperTitle" class="title">
          {{ props.wrapperTitle }}
        </div>
        <div v-if="props.suffixTitle" class="suffix-title">
          {{ props.suffixTitle }}
        </div>
      </div>
      <template v-if="$slots.rightTitle">
        <div class="title-right">
          <slot name="rightTitle"></slot>
        </div>
      </template>
    </div>
    <div
      :style="{
        height: props.wrapperTitle ? 'calc(100% - 50px)' : '100%',
        borderRadius: props.wrapperTitle ? '0px 20px 20px 20px' : '20px',
        ...props.contentStyle,
      }"
      class="common-content"
    >
      <slot>
        <div class="container flex flex-h-c-center">
          <div
            ref="loader"
            class="loader"
            :style="{ width: props.loaderWidth, height: props.loaderHeight }"
          >
            <div class="ball"></div>
          </div>
        </div>
      </slot>
      <div class="wrapper-footer"></div>
    </div>
  </div>
</template>

<script setup name="CommonWrapper">
import { dislodgeLetter } from "@/utils/reg";
import { getCurrentInstance } from "vue";
const props = defineProps({
  borderShow: {
    type: Boolean,
    default: false,
  },
  wrapperTitle: {
    type: String,
    default: "",
  },
  suffixTitle: {
    type: String,
    default: "",
  },
  computedStyle: {
    type: Object,
    default: () => ({}),
  },
  contentStyle: {
    type: Object,
    default: () => ({}),
  },
});
const config = reactive({
  loaderWidth: 0,
  loaderHeight: 0,
});
const showTitle = computed(() => {
  if (props.wrapperTitle !== "" || props.suffixTitle !== "") {
    return true;
  } else {
    return false;
  }
});
onMounted(() => {
  getWrapStyle();
});
const { proxy } = getCurrentInstance();
function getWrapStyle() {
  const _wrap = proxy.$refs.wrap;
  const _wrapStyle = document.defaultView.getComputedStyle(_wrap, null);
  config.loaderWidth = `${Number(dislodgeLetter(_wrapStyle.width)) * 0.15}px`;
  config.loaderHeight = `${Number(dislodgeLetter(_wrapStyle.width)) * 0.15}px`;
}
</script>
<style scoped lang="scss">
.border {
  border: 2px solid;
  border-image: linear-gradient(
      180deg,
      rgba(103, 246, 255, 0.8),
      rgba(83, 68, 255, 0.8)
    )
    2 2;
  background: radial-gradient(
    50% 20% at center bottom,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  clip-path: inset(0 round 4px); //裁剪
}

.common-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;

  .wrapper-title {
    line-height: flexHeight(50);
    display: flex;
    justify-content: space-between;
  }
  .title-left {
    font-size: 24px;
    color: #ffffff;
    border-radius: 10px 10px 0px 0px;
    background-color: rgba(67, 76, 135);
    .title-icon {
      width: 6px;
      height: 24px;
      background: #4dfbff;
      box-shadow: 4px -4px 20px 0px rgba(122, 245, 245, 0.5);
      border-radius: 2px 2px 2px 2px;
    }
    .title {
      padding: 0 20px 0 20px;
    }
  }

  .suffix-title {
    font-size: 20px;
    color: #ffffff;
  }
  .common-content {
    width: 100%;
  }
}

.wrapper-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.common-wrapper:before,
.wrapper-footer:before {
  border-left: 2px solid #1239c3;
  left: 0;
}
.common-wrapper:after,
.wrapper-footer:after {
  border-right: 2px solid #1239c3;
  right: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.container .loader {
  position: relative;
  border-radius: 50%;
  border: 5px solid transparent;
  border-bottom-color: #468cf1;
  border-right-color: #e64e7c;
  transform: rotate(45deg);
  animation: animate 2s ease-in-out infinite;
}
@keyframes animate {
  0% {
    transform: rotate(0deg);
    border-right-color: #e64e7c;
    border-bottom-color: #468cf1;
  }
  50% {
    transform: rotate(90deg);
    border-right-color: #468cf1;
    border-bottom-color: #e64e7c;
  }
  100% {
    transform: rotate(0deg);
    border-bottom-color: #468cf1;
    border-right-color: #e64e7c;
  }
}

.container .loader .ball {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: animateBall 2s ease-in-out infinite;
}
@keyframes animateBall {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(150deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.container .loader .ball::before {
  content: "";
  position: absolute;
  bottom: 50%;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
  animation: animateBallBgColor 1s ease-in-out infinite;
}
@keyframes animateBallBgColor {
  0% {
    background-color: #e64e7c;
  }
  50% {
    background-color: #468cf1;
  }
  100% {
    background-color: #e64e7c;
  }
}
</style>
